<template>
  <KrdPage>
    <view class="team-list">
      <view class="team-member" v-for="(member, index) in teamMembers" :key="index">
        <image :src="member.avatar" class="member-avatar" mode="aspectFill" />
        <view class="member-info">
          <text class="member-name">{{ member.name }}</text>
          <text class="member-title">{{ member.title }}</text>
          <text class="member-bio">{{ member.bio }}</text>
        </view>
      </view>
    </view>
  </KrdPage>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import KrdPage from '@/components/KrdPage.vue'

const teamMembers = ref([
  {
    avatar: '/static/avatar1.jpg',
    name: '张三',
    title: '创始人兼CEO',
    bio: '拥有15年环保行业经验，专注于污水处理技术研发与创新。'
  },
  {
    avatar: '/static/avatar2.jpg',
    name: '李四',
    title: '联合创始人兼CTO',
    bio: '资深工程师，擅长污水处理工艺设计与设备优化。'
  },
  {
    avatar: '/static/avatar3.jpg',
    name: '王五',
    title: '联合创始人兼COO',
    bio: '运营管理专家，负责公司项目执行与质量控制。'
  }
])
</script>

<style>
.team-list {
  width: 100%;
}

.team-member {
  display: flex;
  margin-bottom: 40rpx;
  padding: 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.member-avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.member-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.member-name {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.member-title {
  font-size: 28rpx;
  color: #007AFF;
  margin-bottom: 10rpx;
}

.member-bio {
  font-size: 24rpx;
  color: #666;
}
</style>